<template>
<div style="width:100vw;height:100vh;background:#033c76;color:#fff;">
    <div class="head clearfix">
		<div class="home"><a href="/#/wel/index"><i> 首页</i></a></div>
	    <div class="menu menu1 pulll_left">
            <ul>
                <li><a href="#">智慧农业 </a></li>
                <li><a href="#">水利系统</a></li>
            </ul>
		</div>
        <h1 class="pulll_left">智联农业大数据监控平台</h1>
		<div class="menu menu2 pulll_left">
            <ul>
                <li><a href="#">污水处理监控 </a></li>
                <li><a href="#">园区建设</a></li>
            </ul>
		</div>
		<div class="time" id="showTime">{{currentTime}}</div>
	</div>
    <div class="mainbox">
      <ul class="clearfix nav1">
		<li style="width: 25vw ;height:58vh">
		<div class="box" style="width:25vw;height:25vh">
			<div class="tit">农场概况</div>
			<div class="boxnav scrollY" style="height: 18vh;overflow-y:scroll">
                <video v-if="this.farmVideo"></video>
                <img v-else :src="baseUrl+'/rest/common/preview/' + farmImg" width="100%" height="100px">
                <p style="font-size:12px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;margin-top:4px;">{{farmSummary}}</p>
			</div>
			</div>
			<div class="box" style="width:25vw;height:31vh">
                
			<div class="tit">农场列表</div>
			<div class="boxnav table-wrapper scrollY" style="box-sizing:border-box;height:25vh;overflow-y:scroll">
              <el-table
                ref="singleTable"
                :data="farmData"
                highlight-current-row
                @current-change="handleCurrentChange"
                style="width: 100%"
                :row-style="getRowClass"
                :header-row-style="getRowClass" 
                :header-cell-style="getRowClass">
                <!-- <el-table-column
                 property="id"
                 label="ID"
                width="70">
                </el-table-column> -->
                <el-table-column
                property="name"
                label="农场名称"
                >
                </el-table-column>
                <el-table-column
                property="address"
                label="农场地址"
                width="100">
                </el-table-column>
                <!-- <el-table-column
                property="phone"
                label="联系方式">
                </el-table-column> -->
            </el-table>
            <!--农场分页-->
            <div style="margin-top:10px;">
                <el-pagination
                    background
                    @current-change="handlePageChange"
                    :current-page="page.currentPage"
                    :page-size="page.pageSize"
                    layout="prev, pager, next"
                    :total="page.total">
                </el-pagination>
            </div>
			</div>
			</div>
		</li>
		<li style="width: 45vw;height:57vh">
		
		<div class="box" style="width:44vw;height:57vh;margin: 0 0.5vw">
			<div class="boxnav mapc"  style="height: 57vh; position: relative">
                <!--不同的设备类型显示不同颜色的点-->
                <div class="device-info">
                    <ul>
                        <li><span style="background:#f81535"></span>农业机械</li>
                        <li><span style="background:#f815c5"></span>DTU</li>
                        <li><span style="background:#8015f8"></span>无人机</li>
                        <li><span style="background:#4515f8"></span>控制系统</li>
                        <li><span style="background:#15f8b0"></span>摄像头</li>
                        <li><span style="background:#f88015"></span>传感器</li>
                    </ul>
                </div>
				<div class="mapnav">
				<ul>
					<li><div><span>农场总数</span><p>{{farmTotal}}个</p></div></li>
					<li><div><span>地块总面积</span><p>{{(Number(blockAreaTotal)*0.0015).toFixed(2)}}亩</p></div></li>
					<li><div><span>设备总数</span><p>{{deviceNos}}个</p></div></li>
					<li><div><span>今日订单总数</span><p>272单</p></div></li>
					<li><div><span>今日订单总金额</span><p>136295元</p></div></li>
					</ul>
				</div>
				
			
			<div class="map" id="map">
		    </div>
			</div>
		</div>
		</li>
		<li style="width: 30vw;height:58vh">
		
		<div class="box" style="width:30vw;height:25vh">
			<div class="tit">设备信息</div>
            <div class="elseDevice"  v-for="(item,index) in data" :key="index" style="height:120px">
                   <div>
                       <div>
                         <p>版本号</p>
                         <span>{{item.version}} Version</span>
                       </div>
                    </div>
                    <div>
                        <div>
                          <p>信号强度</p>
                          <span>{{item.signalStrength}} RSSI</span>
                         </div>
                    </div>
                     <div>
                         <div>
                          <p>空气湿度</p>
                          <span>{{item.airHumidity}} %RH</span>
                         </div>
                    </div>
                     <div>
                         <div>
                          <p>空气温度</p>
                          <span>{{item.airTemperature}} ℃</span>
                          </div>
                    </div>
                     <div>
                         <div>
                           <p>土壤电导率</p>
                           <span>{{item.soilConductivity}} us/cm</span>
                         </div>
                    </div>
                     <div>
                         <div>
                          <p>光照</p>
                          <span>{{item.sunlight}} Lux</span>
                         </div>
                    </div>
    
            </div>
			</div>
			<div class="box" style="width:30vw;height:31vh">
			<div class="tit">设备信息</div>
			<div class="boxnav" style="height: 140px;width:100%">
			<!-- <div class="" style="height: 190px" id="echart1"></div> -->
			    <el-row :gutter="20" v-for="(item,index) in data">
                    <el-col :span="12" v-for="(dataItem,key,index) in item.chartData">
                    <div class="chart-container">
                        <div :id="key+item.deviceNo" style="height:120px"></div>
                    </div>
                    </el-col>
                </el-row>
			</div>
			</div>
		
		</li>
		</ul>
		
		<div class="box" style="width:100vw;height:30vh;">
		<ul class="clearfix nav2 ">
		<li style="width:25%"><div class="tit01">产量对比</div>
			<div class="ftechart" id="echart2"></div>
			</li>
		<li style="width:45%">
			<div class="tit01">地块列表</div>
			<!--div class="ftechart" id="echart9"></div-->
            <div class="boxnav table-wrapper" style="height: 115px;">
			    <el-table
                ref="blockTable"
                :data="blockInfo"
                highlight-current-row
                
                style="width: 100%"
                :row-style="getRowClass"
                :header-row-style="getRowClass" 
                :header-cell-style="getRowClass"
                 max-height="130">
                 <el-table-column
                property="cropName"
                label="种植作物"
                width="160"
                >
                </el-table-column>
                <el-table-column
                 property="landNo"
                 label="种植地块"
                width="100">
                </el-table-column>
                <el-table-column
                label="种植面积(亩)"
                width="150">
                   <template slot-scope="scope">
                        <span>{{ (Number(scope.row.landArea)*0.0015).toFixed(2)}}</span>
                   </template>
                </el-table-column>
                 
                <el-table-column
                label="已种天数"
                width="100">
                   <template slot-scope="scope">
                        <span>{{getDays(scope.row.plantDate,scope.row.expectedHarvestDate)}}</span>
                   </template>
                </el-table-column>
            </el-table>

			</div>
			</li>
		
		<li style="width:30%">
            <div class="tit01">视频监控</div>
            <!-- <div class="ftechart" id="echart4"></div> -->
            <div class="prism-player" id="player-con"></div>
        </li>
		</ul>
		</div>

	</div>
    <!-- <div id="popup" class="ol-popup">
          <a href="javascript:;" id="popup-closer" class="ol-popup-closer"></a>
          <div id="popup-content"></div>
        </div> -->
    </div>
</template>
<script>

let echarts = require('echarts')
require('echarts/lib/chart/gauge')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

// import 'echarts/map/js/china.js'
import {
  list
} from '@/api/farm/farm'

import {
	lastData
} from "@/api/data/chart"

import { listBlock, getBindProduct } from '@/api/farm/gis'
import { baseUrl } from '@/config/env'
import { equiplist } from '@/api/equipment/equipment'

import {
    list as videoList
} from "@/api/data/showData"

export default {
    data(){
        return {
            deviceNos:0, //当前所选农场的设备总数
            blockAreaTotal:0, //当前农场地块面积总和
            farmTotal:0,// 当前用户所建农场
            testev:[],
            mockev:[],//设备点集合
            blockInfo:[], // 地块信息
            mapclick:null,
            baseUrl,
            farmSummary:'', // 农场概述
            farmVideo: '', // 农场视频
            farmImg: '', //农场图片
            farmData:null,
            page: {
                pageSize: 2,
                currentPage: 1,
                total: 0
            },
            videoinfo:null,//阿里摄像头            map: null,
            pois: [],
            ip: "http://118.89.249.117:9001/",
            ImageMap: null,
            labelMap: null,
            selectedFeature: null,
            source: null,
            selectedId: null,
            select: null,
            wgs84Sphere: null,
            sketch: null,
            helpTooltipElement: null,
            helpTooltip: null,
            measureTooltipElement: null,
            measureTooltip: null,
            continuePolygonMsg: "单击以继续绘制多边形",
            continueLineMsg: "单击以继续绘制直线",
            isDrawing: false,
            data: [],
            draw: null,
            geoData: [],
            currentTime: 0 
        }
    },
    created(){
        this.formatSystemTime();
       
    },
    mounted(){
        
        var $this = this;
        var player;
         videoList('594638708',1,1).then(res=>{
        this.videoinfo=res.data.data.records[0]
         player = new Aliplayer({
        "id": "player-con",
        "source": res.data.data.records[0].playUrl,
        "width": "100%",
        "height": "120px",
        "autoplay": true,
        "isLive": false,
        "rePlay": false,
        "playsinline": true,
        "preload": true,
        "controlBarVisibility": "hover",
        "useH5Prism": true
        }, function (player) {
            console.log("The player is created");
        }
        );
     })
       
     setInterval(this.formatSystemTime,1000);
     this.paly()
     this.loadDevData()
     this.loadData(this.page)
     //this.echarts_1();
     this.echarts_2();
     
     

     //加载高德地图
    let _this = this;
    this.ImageMap = new ol.layer.Tile({
      source: new ol.source.XYZ({
        url:
          "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=8&x={x}&y={y}&z={z}"
      })
    });
    //加载标记
    this.labelMap = new ol.layer.Tile({
      source: new ol.source.XYZ({
        url:
          "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}"
      })
    });

    //设置地图 实例化一个地图
    this.map = new ol.Map({
      //地图中的比例尺等控制要素
      controls: ol.control
        .defaults({
          attribution: false
        })
        .extend([
          new ol.control.FullScreen() //全屏显示
        ]),
      //设置显示的容器
      target: "map",
      //设置图层
      layers: [
        //添加图层
        this.labelMap,
        this.ImageMap
      ],
      //设置视图
      view: new ol.View({
        //设置投影
        projection: "EPSG:3857",
        center: ol.proj.fromLonLat([121.461801, 31.245441]), //初始在某一点
        minZoom: 3,
        zoom: 15 //缩放级别
      })
    });

    //定义矢量数据源
    this.source = new ol.source.Vector();
    //定义矢量图层
    this.vector = new ol.layer.Vector({
      source: this.source,
      style: new ol.style.Style({
        fill: new ol.style.Fill({
          color: "rgba(255,0,0,0)"
        }),
        stroke: new ol.style.Stroke({
          color: '#08f0d7',
          width: 2
        }),
        image: new ol.style.Circle({
          radius: 5,
          fill: new ol.style.Fill({
            color: "#ffcc33"
          })
        })
      })
    });
    //将矢量图层添加到地图中
    this.map.addLayer(this.vector);

   
    // let oLat = JSON.parse(_this.farmData[0].location).P;
    // let oLnt = JSON.parse(_this.farmData[0].location).Q;

    // this.map.getView().setCenter(ol.proj.fromLonLat([oLat * 1, oLnt * 1]));
    // this.map.getView().setZoom(18);

    this.select = new ol.interaction.Select({
      source: this.source,
      style: new ol.style.Style({
        fill: new ol.style.Fill({
          color: "rgba(8,240,215,0.2)"
        }),
        stroke: new ol.style.Stroke({
          //color: "rgba(255,0,0,1)",
          color: '#08f0d7',
          //lineDash: [10, 10],
          width: 2
        }),
        image: new ol.style.Circle({
          radius: 5,
          stroke: new ol.style.Stroke({
            color: "rgba(0,0,0,0.7)"
          }),
          fill: new ol.style.Fill({
            color: "rgba(255,255,255,0.2)"
          })
        })
      })
    });

       
    _this.select.on("select", function(e) {
        _this.selectedFeature = e.selected[0];
        _this.selectedId = _this.selectedFeature.getId();
        console.log(_this.selectedId);
    });
    this.map.addInteraction(this.select);

    //测试maker问题
    var arrayMock = [];
      //var vectorSource = new ol.source.Vector({});


      //console.log(this.testev);
      
      console.log('dadadadada12313');

      /**设备点展示 */
       equiplist(1,100,{
           keywords:''
        }).then((res)=>
        {
            //this.mockev = res.data.data.records;
             res.data.data.records.map((v,i)=>{
                 //console.log(v.location);
                 if(v.location){
                    let location = JSON.parse(v.location)
                    this.mockev.push({'lat':location.P, 'lnt':location.Q ,'type':v.categoryName})
                    //    this.testev.push('aa')
                    
                 }
             })
             console.log(this.mockev);
             //开始展示点
        this.mockev.map(function(val,index){
       
         arrayMock[index] = new ol.source.Vector({});
         //创建图标特性
        var iconFeature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([val.lat, val.lnt])),
            name: "my Icon",
        });
        //将图标特性添加进矢量中
        arrayMock[index].addFeature(iconFeature);

        //判断iconstyle
        if(val.type == '控制系统'){
        var iconStyle = new ol.style.Style({
         image: new ol.style.Circle({
         radius: 8,
         fill: new ol.style.Fill({
            color: '#4515f8'
          })
         }),
        })
        }else if(val.type == '农业机械'){
         var iconStyle = new ol.style.Style({
         image: new ol.style.Circle({
         radius: 8,
         fill: new ol.style.Fill({
            color: '#f81535'
          })
         }),
        })
        }else if(val.type == 'DTU'){
         var iconStyle = new ol.style.Style({
         image: new ol.style.Circle({
         radius: 8,
         fill: new ol.style.Fill({
            color: '#f815c5'
          })
         }),
    })
        }else if(val.type == '无人机'){
          var iconStyle = new ol.style.Style({
         image: new ol.style.Circle({
         radius: 8,
         fill: new ol.style.Fill({
            color: '#8015f8'
          })
         }),
    })
        }else if(val.type == '摄像头'){
         var iconStyle = new ol.style.Style({
         image: new ol.style.Circle({
         radius: 8,
         fill: new ol.style.Fill({
            color: '#15f8b0'
          })
         }),
        })
        }else if(val.type == '传感器'){
         var iconStyle = new ol.style.Style({
         image: new ol.style.Circle({
         radius: 8,
         fill: new ol.style.Fill({
            color: '#f88015'
          })
         }),
    })
        }
        
    //创建图标层
    var vectorLayer = new ol.layer.Vector({
        source: arrayMock[index],
        style: iconStyle
    });
    _this.map.addLayer(vectorLayer);
        //console.log(t1+" "+t2);
     })
     /**展示点结束 */
        })
    // var vectorSource = new ol.source.Vector({});
    //      //创建图标特性
    //     var iconFeature = new ol.Feature({
    //         geometry: new ol.geom.Point(ol.proj.fromLonLat([113.767312, 34.728194])),
    //         name: "my Icon",
    //     });
    //     //将图标特性添加进矢量中
    //     vectorSource.addFeature(iconFeature);
     //创建图标样式
    // var iconStyle = new ol.style.Style({
    //     image: new ol.style.Icon({
    //         opacity: 0.75,
    //         src: "https://openlayers.org/en/latest/examples/data/icon.png"
    //     }),
    // });
    // var iconStyle = new ol.style.Style({
    //      image: new ol.style.Circle({
    //      radius: 8,
    //      fill: new ol.style.Fill({
    //         color: 'orange'
    //       })
    //      }),
    // })
    // //创建图标层
    // var vectorLayer = new ol.layer.Vector({
    //     source: vectorSource,
    //     style: iconStyle
    // });
   
    // _this.map.addLayer(vectorLayer);

    /*********************显示弹出层**************************/
    // var container = document.getElementById("popup");
    // var content = document.getElementById("popup-content");
    // var popupCloser = document.getElementById("popup-closer");

    // var overlay = new ol.Overlay({
    //     element: container,
    //     autoPan: true
    // });

    // _this.map.on('click',function(e){
    //     //console.log(e);
    //     setTimeout(function(){
    //       if(_this.selectedId){
    //        return;
    //       }else{
    //          var pixel = _this.map.getEventPixel(e.originalEvent);
    //          _this.map.forEachFeatureAtPixel(pixel,function(feature){
    //             var coodinate = e.coordinate;
    //             content.innerHTML = "<p>当前设备信息：" + 1111111 + "</p>";
    //             overlay.setPosition(coodinate);
    //             _this.map.addOverlay(overlay);
    //          });
    //       }
    //     },400)
       
       
    // });

    // popupCloser.addEventListener('click',function(){
    //     overlay.setPosition(undefined);
    // });
    },
    methods:{
        //计算天数
        getDays(date1 , date2){
            var date1Str = date1.split("-");//将日期字符串分隔为数组,数组元素分别为年.月.日
            //根据年 . 月 . 日的值创建Date对象
            var date1Obj = new Date(date1Str[0],(date1Str[1]-1),date1Str[2]);
            var date2Str = date2.split("-");
            var date2Obj = new Date(date2Str[0],(date2Str[1]-1),date2Str[2]);
            var t1 = date1Obj.getTime();
            var t2 = date2Obj.getTime();
            var dateTime = 1000*60*60*24; //每一天的毫秒数
            var minusDays = Math.floor(((t2-t1)/dateTime));//计算出两个日期的天数差
            var days = Math.abs(minusDays);//取绝对值
            return days;
        },
        change() {

          //change、paly表格数据动态滚动

          this.blockInfo.push(this.blockInfo[0]);//把第一条数据插入数组最有一条

          this.blockInfo.shift();//删除数组中第一条数据

        },
        paly() {

          setInterval(this.change, 2000);//每两秒执行一次插入删除操作

        },
        //获取设备信息和图表
        //请求table数据
  		loadDevData(){
				//if (!this.query.deviceNo) return;
  			lastData('1098417D08CE').then((res) => {
				if (res.data.code === 200 && res.data.data.length) {
					const result = res.data.data;
					this.data = this.convertDevData(result);
					//渲染图表
					this.renderChart(this.data)
				}
				
  			})
        },
        renderChart(data){
			if(!data.length) return;
			console.log(data, '111111')
			
				for(let key in data[0].chartData){
					
					//渲染图表
					this.$nextTick(() => {
						this.initChart(key+data[0].deviceNo, key, data[0].chartData[key])
					})
					
				}
			
        },
        getChartName(key){
			  let name = '', unit;
  			if(key == 'soilMoisture'){
				  name = '土壤湿度'
				  unit = '%RH'
  			}

  			
  			if(key == 'soilTemperature'){
				  name = '土壤温度'
				  unit = '℃'
              }

  			return {name, unit};
  		},
        initChart(id,key,deviceValue){
  			let this_ = this;
  			let {name, unit} = this.getChartName(key);



      		let myChart = echarts.init(document.getElementById(id));

	      	let option = {
				 
	      		tooltip: {
					formatter: '{a} : {c}%',
	    		},
	    		series: [
			        {
			            name: name,
                        type: 'gauge',
                        radius:'100%',
                        title:{
                            show:true,
                            color:'#fff',
                            offsetCenter: [0, '90%'] 
                        },
			            min:0,
			            max:name == '电量' ? 1000 : 100,
			            axisLine:{
                            
			            	lineStyle:{
								width:10,
							}
						},
			            splitLine:{
			            	length:10
                        },
                        axisTick:{
                            show:true
                        },
                        axisLabel:{
                            show:true,
                            distance:2
                        },
			            pointer:{
			            	length:'60%',
			            	width:4
			            },
			            detail: {
							fontSize: 18,
							formatter: [
									'{a|' + unit + '}',
									'{b|'+ deviceValue +'}'
								].join('\n'),
								rich: {
									a: {
										color: '#fff',
										lineHeight: 20
									},
									b: {
										fontSize: 18,
										borderColor: '#d7d7d7',
										borderRadius: 3,
										paddingLeft: 5,
										padding: 5,
										width: 60,
										top: 10,
										fontWeight: 500,
									}
								}
			            },
			            data: [{value: deviceValue, name: name}]
			        }
	    		]
	      	};

      		myChart.setOption(option);

      		//myChart.getDom().style.height = this_.chartHeight;

      		myChart.resize();
			console.log('卡看')
	      	//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
	      	window.addEventListener('resize',function() {myChart.resize()});
  		},
        //初始化地图
        init() {
            let _this = this;
            _this.source.clear();
            //$('#table').bootstrapTable('destroy');
            listBlock(_this.farmData[0].id).then(res => {
                _this.geoData = res.data.data;
                console.log(_this.geoData);
                var features = [];
                for (var i = 0; i < _this.geoData.length; i++) {
                var feature = new ol.format.WKT().readFeature(_this.geoData[i].geo, {
                    // dataProjection: 'EPSG:4326',
                    // featureProjection: 'EPSG:3857'
                });
                feature.setId(_this.geoData[i].id);
                _this.source.addFeature(feature);
                }
            });
            //获取已绑定的农产品列表
            getBindProduct(_this.farmData[0].id, 1, 10)
            .then((res) => {
               this.blockInfo = res.data.data.records;
               let totalArea = 0
               this.blockAreaTotal = (this.blockInfo.reduce((totalArea,item)=>totalArea + Number(item.landArea),0)).toFixed(1)
            })
            },
        getRowClass({ row, column, rowIndex, columnIndex }) {
                return "background:transparent;";
        },
        //选中对应的农场触发地块加载val
        handleCurrentChange(val){
            let _this = this;
            _this.farmImg = val.image;
            _this.farmSummary = val.summary;
            let oLat = JSON.parse(val.location).P;
            let oLnt = JSON.parse(val.location).Q;

            this.map.getView().setCenter(ol.proj.fromLonLat([oLat * 1, oLnt * 1]));
            this.map.getView().setZoom(18);

            listBlock(val.id).then((res)=>{
                 _this.geoData = res.data.data;
                console.log(_this.geoData);
                var features = [];
                for (var i = 0; i < _this.geoData.length; i++) {
                var feature = new ol.format.WKT().readFeature(_this.geoData[i].geo, {
                    // dataProjection: 'EPSG:4326',
                    // featureProjection: 'EPSG:3857'
                });
                feature.setId(_this.geoData[i].id);
                _this.source.addFeature(feature);
                }
            });
            //获取已绑定的农产品列表
            getBindProduct(val.id, 1, 10)
            .then((res) => {
               this.blockInfo = res.data.data.records;
               let totalArea = 0
               this.blockAreaTotal = (this.blockInfo.reduce((totalArea,item)=>totalArea + Number(item.landArea),0)).toFixed(1)
            })

            //过滤设备点显示设备
             equiplist(1,100,{
               keywords:''
             }).then((res)=>
              {
                this.deviceNos = (res.data.data.records.filter((item) => item.farmId == val.id)).length
             })
        },
        //农场分页
        handlePageChange(currentPage, params = {}){
            list(currentPage, this.page.pageSize, Object.assign(params, this.query)).then(res => {
            const result = res.data.data.records;
            this.page.currentPage = res.data.data.current;
            this.page.total = res.data.data.total;
            this.farmData = this.convertData(result);
            // this.init();
            // let oLat = JSON.parse(this.farmData[0].location).P;
            // let oLnt = JSON.parse(this.farmData[0].location).Q;

            // this.map.getView().setCenter(ol.proj.fromLonLat([oLat * 1, oLnt * 1]));
            // this.map.getView().setZoom(18);
             });
        },
        //格式化系统时间
        formatSystemTime(){
            let date=new Date();
            let Y= date.getFullYear() + '/';
            let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '/';
            let D = (date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate()) + ' ';
            let H = date.getHours() + ':';
            let Mx = date.getMinutes() + ':';
            let S = (date.getSeconds() < 10 ? '0'+(date.getSeconds()) : date.getSeconds());
            this.currentTime = Y+M+D+H+Mx+S; 
        },
        //请求农场列表数据
        loadData(page, params = {}){
            this.loading = true;
            list(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {

                this.loading = false;
            const result = res.data.data.records;
            this.farmTotal = res.data.data.total;
            this.page.currentPage = res.data.data.current;
            this.page.total = res.data.data.total;
            this.farmData = this.convertData(result);
            this.init();
            let oLat = JSON.parse(this.farmData[0].location).P;
            let oLnt = JSON.parse(this.farmData[0].location).Q;
            this.farmImg = this.farmData[0].image;
            this.farmSummary = this.farmData[0].summary;
            //过滤设备点显示设备
             equiplist(1,100,{
               keywords:''
             }).then((res)=>
              {
                this.deviceNos = (res.data.data.records.filter((val) => val.farmId == this.farmData[0].id)).length
             })
            this.map.getView().setCenter(ol.proj.fromLonLat([oLat * 1, oLnt * 1]));
            this.map.getView().setZoom(18);
            });
            
        },
        convertDevData(data){
            if(data.length === 0) return [];
    		let arr = [];
    		data = data.slice();
    		data.forEach((item) => {
    			item['chartData'] = this.filterDeviceData(item)
    		})

      		return data;
        },
        filterDeviceData(obj){
    		let temp = {};
			if(obj.categoryName != 'DTU'){
				
    			temp['soilTemperature'] = obj['soilTemperature'];
    			temp['soilMoisture'] = obj['soilMoisture'];
				
			}else{
				temp['electricity'] = obj['electricity'];
                temp['waterFlow'] = obj['waterFlow'];
				temp['waterSpeed'] = obj['waterSpeed'];
			}

    		return temp;
    	},
        convertData(data){
             return data;
        },
        echarts_2(){
           // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('echart2'));
        let option = {
        //  backgroundColor: '#00265f',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['2017年', '2018年'],
                top:'5%',
                textStyle: {
                    color: "#fff",
                    fontSize: '12',

                },
        
                itemGap: 35
            },
            grid: {
                left: '0%',
                top:'40px',
                right: '0%',
                bottom: '0',
            containLabel: true
            },
            xAxis: [{
                type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                axisLine: {
                    show: true,
                lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel:  {
                        interval: 0,
                    // rotate:50,
                        show: true,
                        splitNumber: 5,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                    },
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                //formatter: '{value} %'
                    show:true,
                    textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                    color: "rgba(255,255,255,.1)",
                    }
                }
            }],
    series: [{
        name: '2017年',
        type: 'line',
 smooth: true,
        data: [2, 6, 3, 8, 5, 8],

        itemStyle: {
            normal: {
                color:'#2f89cf',
                opacity: 1,
				
				barBorderRadius: 5,
            }
        }
    }, {
        name: '2018年',
        type: 'line',
		 smooth: true,
        data: [5, 2, 6, 4, 5, 12],
		barWidth:'15',
       // barGap: 1,
        itemStyle: {
            normal: {
                color:'#62c98d',
                opacity: 1,
				barBorderRadius: 5,
            }
        }
    },
	]
};
   
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
        },
        echarts_9(){
                  let myChart = echarts.init(document.getElementById('echart9'));
                  let option = {
                        tooltip: {
                        trigger: 'axis',
                        axisPointer: {type: 'shadow'},
                        formatter:'{b}走势' ,
                    },
                    legend: {
                        x: 'center',
                        y: '10',
                        icon: 'circle',
                        itemGap:8,
                        textStyle: {color: 'rgba(255,255,255,1)'},
                        itemWidth: 10,
                        itemHeight: 10,
                    },
                    grid: {
                        left: '0',
                        top: '40',
                        right: '15',
                        bottom: '0',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                        axisLine: {show:false},
                    
                        axisLabel: {
                        textStyle: {
                        color:'rgba(255,255,255,.5)',
                
                        }
                        },
                    },
            
                    yAxis: {
                        type: 'value',
                        splitNumber:4,
                        axisLine: { show: false },
                    axisTick: {show: false},
                        splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255,255,255,0.05)'
                        }
                        },
                        axisLabel:  {
                            textStyle: {
                                color: "rgba(255,255,255,.5)",
                                    },
                                },
                    },
                    series: [ {
                        name: '用电',
                        type: 'bar',
                        barWidth: '25%',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#8bd46e'
                                }, {
                                    offset: 1,
                                    color: '#03b48e'
                                }]),
                                barBorderRadius: 11,
                            }
                            
                        },
                        data: [123,154, 234, 321,120,390]
                    
                    },
                        {
                        name: '水质',
                        type: 'bar',
                    barWidth: '25%',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#3893e5'
                            }, {
                                offset: 1,
                                color: '#248ff7'
                            }]),
                        barBorderRadius: 11,
                        }
                    },
                        data: [63,194, 234, 321,278,110]
                    
                    }
                
                ]
                    };
                        myChart.setOption(option);
                        window.addEventListener("resize",function(){
                            myChart.resize();
                        });
        },
    }
}
</script>
<style  scoped>
@charset "utf-8";
body{
    width:100vw !important;
    height:100vh !important;
}
.elseDevice>div{
    width:25%;
    height:40px;
    color:#fff;
    text-align: center;
    font-size:13px;
    float:left;
    margin-top:2vh
}
.elseDevice>div div{
    width:85%;
    margin:0 auto;
    background:cornflowerblue;
}
#map {
  width: 100%;
  height: 100%;
  position: relative;
}
.table-wrapper{
    text-align: center;
}
 .table-wrapper /deep/  .el-table, .el-table__expanded-cell {
    background-color: transparent;
    color:#fff;
}

 .table-wrapper /deep/ .el-table tr {
    background-color: transparent!important;
    color:#fff;
}
 .table-wrapper /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
    background-color: transparent;
    color:#fff;
}
/* CSS Document */
*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box}
*,body{padding:0px;	margin:0px;font-family: "微软雅黑";}
body{color:#fff;font-size: 16px; background: #033c76 !important;}
li{ list-style-type:none;}
table{}
i{ margin:0px; padding:0px; text-indent:0px;}
img{ border:none; max-width: 100%;}
a{ text-decoration:none; color:#fff;}
a.active,a:focus{ outline:none!important; text-decoration:none;}
ol,ul,p,h1,h2,h3,h4,h5,h6{ padding:0; margin:0}
a:hover{ color:#06c; text-decoration: none!important}
.clearfix:after, .clearfix:before {
	display: table;
	content: " "
}
 .clearfix:after {
	clear: both
}
.pulll_left{float:left;}
.pulll_right{float:right;}
i{font-style: normal;}
.head{position: relative; width:100vw;height: 10vh;}
.head h1{ width: 44%; font-size: 32px; text-align: center; line-height: 90px; color: #daf9ff; font-weight: bolder;}
.head .menu{  width: 28%}
.head .menu ul{ font-size: 0;}
.head .menu1 ul{text-align: right}
.head .menu2 ul{text-align: left}
.head .menu li{ display: inline-block; position: relative;margin: 25px 15px;}
.head .menu li a{ display: block; font-size: 14px; color: #fff; line-height: 40px; padding: 0 15px; }
.head .home{position: absolute; left: 1vw;top: 5vh }
.head .home a *{display: inline-block; vertical-align: middle;}
.head .time{position: absolute; right: 0; line-height: 90px;}
/****
.menu li:before,
.menu li:after{ position:absolute; width:10px; height:5px;opacity: .4; content: "";  border-top: 2px solid #02a6b5; top: -1px;border-radius: 2px;}
.menu li:before,.menu li a:before{border-left: 2px solid #02a6b5;left: -1px;}
.menu li:after,.menu li a:after{border-right: 2px solid #02a6b5; right: -1px;}
.menu li a{ position:relative;}
.menu li a:before,
.menu li a:after{ position:absolute; width:10px; height:5px; opacity: .4;  content: "";border-bottom: 2px solid #02a6b5; bottom:-1px;border-radius: 2px;}
****/
.head .menu li a:hover{ color: #f4e925;}
.menu li a:hover:before,
.menu li a:hover:after,
.menu li:hover:before,
.menu li:hover:after{border-color:  #f4e925; opacity: 1;}

.mainbox{position:fixed;width:100vw;height:88vh;top:12vh;margin-top:-1vh;}
.nav1{width:100vw;height:58vh;display: flex;justify-content: space-between;}
.nav1>li{}

.box{ border:1px solid rgba(7,118,181,.7); box-shadow:inset 0 0 5px rgba(7,118,181,.8); margin-bottom: 1vh; position: relative;}
.tit{ padding: 10px 10px 10px 25px;border-bottom:1px solid rgba(7,118,181,.7);font-size: 14px; font-weight: 500; position: relative;}
.tit:before,.tit01:before{position: absolute; content: ""; width: 6px; height: 6px; background: rgba(22,214,255,.9);box-shadow: 0 0 5px rgba(22,214,255,.9); border-radius: 10px; left: 10px; top: 18px;}

.tit:after,.box:before{ width: 100%; height: 1px; content: ""; position: absolute; left: 0; bottom:-1px; background:linear-gradient(to right,#076ead,#4ba6e0,#076ead); box-shadow: 0 0 5px rgba(131,189,227,1);}
.box:before{top: -1px;}

.boxnav{padding: 10px;}
.boxnav /deep/ .el-table__body-wrapper {
    overflow:hidden;
}
.scrollY::-webkit-scrollbar {
 width: 0px;
}
 .scrollY::-webkit-scrollbar-track {
 background-color:transparent;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}
 .scrollY::-webkit-scrollbar-thumb {
 background-color:green;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}
.nav2{}
.nav2 li:first-child{border:none;}
.nav2 li{float: left;border-left:1px solid rgba(7,118,181,.2); height:140px; padding: 0 10px 10px 10px;}
.tit01{font-size: 16px; font-weight: 500; position: relative; padding-left: 15px;}
.tit01:before{ left: 3px; top: 8px;}

.ftechart{height: 100px;}



.table1 th{ border-bottom: 1px solid #407abd; font-size: 14px; text-align: center; padding: 6px 0; color: rgba(255,255,255,.8)}
.table1 td{ border-bottom: 1px dotted#407abd;font-size: 12px; padding:6px 0;text-align: center; color: rgba(255,255,255,.6)}
.table1 tr:last-child td{border: none;}
.mapc{background: url(../../assets/bg3.png) no-repeat center center; background-size: 100% 100%}
.map{position: relative; height: 100%; padding-top:0px;}
.map img{}
.mapnav{position: absolute; z-index: 100;}
.mapnav div{ background: url(../../assets/bg1.png) no-repeat; background-size:100% auto;  width: 8.1vw;text-align: center; padding: 20px 0; line-height: 120%;}
.mapnav div span{font-size: 14px; opacity: .6}
.mapnav div p{font-size: 20px; font-weight: bold; padding-top: 5px;}
.mapnav li{float: left; margin-right: 0.4vw;}


.leidanav{margin-top: -5px;}
.leidanav li{float: left; width: 20%; text-align: center; border-left: 1px solid rgba(255,255,255,.1)}
.leidanav li:first-child{border-left: none;}
.leidanav span{font-size: 12px; opacity: .6}
.leidanav p{font-size: 14px; }

.ybp{width: 100%}
.ybp li{float: left; width: 50%; height: 120px; }
.duibi li{float: left; width: 25%; height: 200px; padding: 0; border: none;}
.ol-popup {
            position: absolute;
            background-color: #eeeeee;
            -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #cccccc;
            bottom: 12px;
            left: -50px;
            min-width: 280px;
            color:#000;
        }

        .ol-popup:after,
        .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }

        .ol-popup:after {
            border-top-color: #eeeeee;
            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }

        .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }

        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
            color:#000
        }

        .ol-popup-closer:after {
            content: "✖";
        }
        .device-info{
            position: absolute;
            bottom:25px;
            right:30px;
            z-index:999999
        }

.device-info ul li{
    font-weight: 600;
    color:#fff;
    font-size:12px;
}
        .device-info span{
            margin-right:8px;
            display: inline-block;
            width:10px;
            height:10px;
            border-radius: 50%;
        }
</style>